<!--  -->
<script setup>
import { ref } from 'vue'
import Icon from './Icon.vue'

const boxVisible = ref(false)
</script>

<template>
  <div class="info-container" @click="boxVisible = !boxVisible">
    <Icon icon-name="info"></Icon>
    <Transition name="fade">
      <div v-if="boxVisible" class="tip-box">
        <slot></slot>
      </div>
    </Transition>
  </div>
</template>

<style scoped lang="scss">
.info-container {
  position: relative;

  .tip-box {
    position: absolute;
    top: 50%;
    left: 130%;
    background-color: var(--background-secondary);
    border-radius: 2px;
    padding: 4px 6px;
    min-width: 50px;
    max-width: 300px;
    min-height: 30px;
    word-break: keep-all;
    filter: drop-shadow(-3px 3px 1px var(--shadow-03));
    border: 1px solid #96a982;
    z-index: 9999;
    translate: 0 -50%;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -5px;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-right: 10px solid var(--background-secondary);
      border-bottom: 5px solid transparent;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
